import Editor from 'for-editor';
import { useState } from 'react';
import styles from './index.less';
import { Button, Popconfirm } from 'antd';
import { IRouteComponentProps } from 'umi';
import { CloseOutlined, SearchOutlined } from '@ant-design/icons';
const Ameditor: React.FC<IRouteComponentProps<{ id: string }>> = (props) => {
  const [value, setValue] = useState('');
  return (
    <div>
      <header className={styles.editor_id_header}>
        <div className={styles.editor_id_ghost}>
          <div className={styles.editor_id_content}>
            <div>
              <Popconfirm
                title="确认关闭？如果有内容变更，请先保存"
                placement="right"
                onConfirm={() => {
                  props.history.push('/article');
                }}
                okText="确认"
                cancelText="取消"
              >
                <button
                  className={styles.amEditor_button_close}
                >
                  <CloseOutlined />
                </button>
              </Popconfirm>
              <span className={styles.editor_input_title}>
                <input
                  type="text"
                  placeholder="请输入文章标题"
                  value={value}
                  onChange={() => {}}
                />
              </span>
            </div>
            <span>
              <Button htmlType="submit" type="primary">
                <span>发布</span>
              </Button>
              <Button htmlType="submit" type="text">
                <span>
                  <svg
                    viewBox="64 64 896 896"
                    focusable="false"
                    data-icon="ellipsis"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                  >
                    <path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path>
                  </svg>
                </span>
              </Button>
            </span>
          </div>
        </div>
      </header>
      <main>
        <div className={styles.dumi_default_navbar} data-mode="site">
          <p className={styles.dumi_default_navbar_logo}>
            <img src="https://www.bwie.com/favicon.ico" alt="" />
            <span>八维创作平台协同编辑器</span>
          </p>
          <nav></nav>
          <div className={styles.dumi_default_nav_right}>
            <div className={styles.dumi_default_search}>
              <input
                className={styles.dumi_default_search_input}
                type="search"
              />
              <SearchOutlined style={{ fontSize: '18px', color: '#aaa' }} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Ameditor;
